<template>
  <div class="settings page-container">
    <van-nav-bar title="设置" left-arrow @click-left="router.back()" />
    <div class="settings-content content-container">
      <!-- 账号设置 -->
      <van-cell-group inset title="账号设置">
        <van-cell title="个人信息" is-link @click="router.push('/user/profile')" />
        <van-cell title="修改密码" is-link @click="router.push('/user/change-password')" />
        <van-cell title="隐私设置" is-link @click="showNotImplemented" />
      </van-cell-group>

      <!-- 通知设置 -->
      <van-cell-group inset title="通知设置">
        <van-cell title="推送通知">
          <template #right-icon>
            <van-switch v-model="settings.pushNotification" size="24" />
          </template>
        </van-cell>
        <van-cell title="活动提醒">
          <template #right-icon>
            <van-switch v-model="settings.activityReminder" size="24" />
          </template>
        </van-cell>
        <van-cell title="消息通知">
          <template #right-icon>
            <van-switch v-model="settings.messageNotification" size="24" />
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 通用设置 -->
      <van-cell-group inset title="通用设置">
        <van-cell title="清除缓存" is-link @click="clearCache" />
        <van-cell title="关于我们" is-link @click="showNotImplemented" />
        <van-cell title="用户协议" is-link @click="showNotImplemented" />
        <van-cell title="隐私政策" is-link @click="showNotImplemented" />
      </van-cell-group>

      <!-- 退出登录 -->
      <div class="logout-btn">
        <van-button block type="danger" @click="handleLogout">退出登录</van-button>
      </div>

      <div class="version-info">
        <p>当前版本: v1.0.0</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 设置选项
const settings = ref({
  pushNotification: true,
  activityReminder: true,
  messageNotification: true
})

// 清除缓存
const clearCache = () => {
  showDialog({
    title: '清除缓存',
    message: '确定要清除应用缓存吗？',
    showCancelButton: true
  }).then(() => {
    // 模拟清除缓存
    setTimeout(() => {
      showToast('缓存已清除')
    }, 1000)
  })
}

// 显示未实现提示
const showNotImplemented = () => {
  showToast('功能开发中，敬请期待')
}

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true
  }).then(() => {
    userStore.logout()
    showToast('已退出登录')
    router.replace('/')
  })
}
</script>

<style lang="scss" scoped>
.settings {
  background-color: #f7f8fa;

  .settings-content {
    // padding: 16px;

    .van-cell-group {
      margin-bottom: 12px;
    }
  }

  .logout-btn {
    margin: 24px 0;
  }

  .version-info {
    text-align: center;
    font-size: 12px;
    color: #969799;
    margin-top: 16px;

    p {
      margin: 0;
    }
  }
}
</style>